// 设置基地址
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'

// 获取元素
const tb = document.querySelector('#tb')
const form = document.querySelector('#bookForm')

// 封装一个渲染函数
const renderData = function () {
  // 发起请求
  axios.get('/api/getbooks').then(({ data: res }) => {
    // console.log(res);
    const { data } = res

    // map遍历数据添加模板
    const html = data
      .map((item) => {
        return `<tr>
      <td>${item.id}</td>
      <td>${item.bookname}</td>
      <td>${item.author}</td>
      <td>${item.publisher}</td>
      <td><a href="#" data-id="${item.id}">删除</a></td>
          </tr>`
      })
      // join('')将数据转成字符串
      .join('')

    // 渲染真实数据到页面
    tb.innerHTML = html
  })
}

// 页面加载，调用渲染函数时渲染页面
renderData()

// 添加内容

// 给form表单添加提交事件
form.addEventListener('submit', function (e) {
  // 阻止表单的默认提交行为
  e.preventDefault()

  // 使用serialize插件获取数据
  // 直接将数据转化成对象
  const data = serialize(form, { hash: true })

  // 发起请求
  axios.post('/api/addbook', data).then(({ data: res }) => {
    alert(res.msg)
    // 判断业务状态码是不是成功状态
    if (!res.msg === '201') return

    // 重置input框里面的内容
    form.reset()

    // 成功添加后重新调用渲染函数渲染页面
    renderData()
  })
})

// 删除内容
// 给tb绑定一个委托事件 点击后执行a标签
tb.addEventListener('click', function () {
  // 判断有没有a标签
  if (e.target.tagName === 'A') {
    // 给a标签添加一个自定义属性，并且获取自定义属性的id
    const id = e.target.dataset.id

    // 发起删除请求
    axios.get('/api/delbook', { garams: { id } }).then(({ data: res }) => {
      // 删除之后重新渲染页面
      renderData()
    })
  }
})

// 搜索
// 获取搜索btn按钮元素
const search = document.querySelector('#search')
// 给搜索tbn按钮绑定点击事件
search.addEventListener('click', function (e) {
  // 阻止表单的默认提交行为
  e.preventDefault()
  //使用使用serialize插件获取数据,直接将数据转化成多谢
  const data = serialize(form, { hash: true })

  axios.get('/api/getbooks', { params: data }).then(({ data: res }) => {
    //  获取数组
    const render = res.data
    // map遍历数据，添加模板
    const html = render
      .map((item) => {
        return `<tr>
  <td>${item.id}</td>
  <td>${item.bookname}</td>
  <td>${item.author}</td>
  <td>${item.publisher}</td>
  <td><a href="#" data-id="${item.id}">删除</a></td>
      </tr>`
      })
      // 转为字符串
      .join('')
    // 渲染真实数据到页面
    tb.innerHTML = html
  })
})
